<!--
 * @Descripttion: 库存报表->库存台账
 * @version: V1.0
 * @Author: GaoWei
 * @Date: 2021-06-01 17:50:12
 * @LastEditors: GW
 * @LastEditTime: 2022-01-11 14:33:50
-->

<template>
    <div class="content-wrapper a-base-container">
        <div class="requisition-set-wrapper">
            <!-- 按钮 -->
            <div class="btn-wrapper clearfix">
                <a-row class="text-center clearfix">
                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                        <!-- <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="searchDynamic">
                                <a-icon class="btns-icon" type="search" />
                                <div class="btns-text">查询</div>
                            </div>
                        </a-col> -->
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="exportOrder">
                                <a-icon class="btns-icon" type="export" />
                                <div class="btns-text">导出</div>
                            </div>
                        </a-col>
                        <!-- <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="printOrder">
                                <a-icon class="btns-icon" type="printer" />
                                <div class="btns-text">打印</div>
                            </div>
                        </a-col> -->
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="syncFun">
                                <a-icon class="btns-icon" type="sync" />
                                <div class="btns-text">刷新</div>
                            </div>
                        </a-col>
                    </a-col>
                </a-row>
            </div>
            <div ref="print" class="credentials-wrapper" id="documents-wrapper">
                <div style="min-height:400px;">
                    <h3 class="text-center">
                        <span class="text-name">库存台账</span><br>
                    </h3>
                    <section>
                        <section class="credentials-search-warpper">
                            <div class="search-box">
                                <div class="filter">
                                    <label class="filter-label"><span style="color:red">*</span> 仓库：</label>
                                    <div class="filter-control">
                                        <a-input @click="searchGroup(1)" @change="searchGroup(2)" v-model="warehouseName" autocomplete="off" placeholder="请选择仓库"></a-input>
                                        <searchGroupHeader ref="credentialsSearch" :inputValue="warehouseName" :componentName="'warehouse'" @clickItem="setValue"></searchGroupHeader>
                                    </div>
                                </div>

                                <div class="filter">
                                    <label class="filter-label"><span style="color:red">*</span> 物料名称：</label>
                                    <div class="filter-control" ref="inventoryNameWarpper" id="inventoryNameId">
                                        <a-input v-model="inventoryName" @keyup="handleArchiveChange()" @click="handlInputArchives(1,'searchArchivesRef')" style="position:relative;z-index:50"></a-input>
                                        <searchArchives v-if="maskArchives" ref="searchArchivesRef" :inventoryDomRight="inventoryDomRight" :inputType="1" :checkType="checkType" :inputVal="inventoryName" @closeArchives="closeArchives" @check="checkArchives"></searchArchives>
                                        <div class="mask-archives" v-show="maskArchives" @click="closeArchives"></div>
                                    </div>
                                </div>
                                <div class="filter">
                                    <label class="filter-label">规格型号：</label>
                                    <div class="filter-control">
                                        <a-input read-only disabled v-model="inventorySpecification"></a-input>
                                    </div>
                                </div>
                                <div class="filter">
                                    <label class="filter-label">计量单位：</label>
                                    <div class="filter-control">
                                        <a-input read-only disabled v-model="unitName"></a-input>
                                    </div>
                                </div>
                                <div class="filter">
                                    <label class="filter-label">物料分类：</label>
                                    <div class="filter-control">
                                        <a-input read-only disabled v-model="inventoryClassName"></a-input>
                                    </div>
                                </div>
                                <div class="filter">
                                    <label class="filter-label">安全库存：</label>
                                    <div class="filter-control">
                                        <a-input read-only disabled v-model="safeStorage"></a-input>
                                    </div>
                                </div>
                                <div class="filter">
                                    <label class="filter-label">最高库存：</label>
                                    <div class="filter-control">
                                        <a-input read-only disabled v-model="maxStorage"></a-input>
                                    </div>
                                </div>
                                <div class="filter">
                                    <label class="filter-label">最低库存：</label>
                                    <div class="filter-control">
                                        <a-input read-only disabled v-model="minStorage"></a-input>
                                    </div>
                                </div>
                                <div class="filter">
                                    <label class="filter-label">出入库日期：</label>
                                    <div class="filter-control">
                                        <a-range-picker style="width:222px;" v-model="voucherDate" :ranges="{ '今日': [moment(), moment()], '本月': [moment(), moment().endOf('month')] }" @change="onChangeDate" />
                                    </div>
                                </div>
                                <div class="filter" style="width:300px">
                                    <label class="filter-label">期间：</label>
                                    <!-- <div class="filter-control">
                                        <a-range-picker style="width:222px;" v-model="periodDate" format="YYYY-MM" :placeholder="['开始期间', '结束期间']" @change="onPeriodDate" />
                                    </div> -->
                                    <div class="filter-control">
                                        <a-select placeholder="开始期间" style="width:100px" @change="startPeriodChange">
                                            <a-select-option v-for="item in periodData" :key="item" :data-id="item.id" :value="`${item.currentYear}-${item.currentPeriod}`">
                                                {{item.currentYear}}-{{item.currentPeriod}}
                                            </a-select-option>
                                        </a-select>
                                        至
                                        <a-select placeholder="结束期间" style="width:100px" @change="endPeriodChange">
                                            <a-select-option v-for="item in periodData" :key="item" :data-id="item.id" :value="`${item.currentYear}-${item.currentPeriod}`">
                                                {{item.currentYear}}-{{item.currentPeriod}}
                                            </a-select-option>
                                        </a-select>
                                    </div>
                                </div>
                                <div class="filter">
                                    <label class="filter-label"> 往来单位：</label>
                                    <div class="filter-control">
                                        <a-input @click="searchCompany(1)" @change="searchCompany(2)" v-model="companyName" autocomplete="off" placeholder="请选择往来单位"></a-input>
                                        <searchGroupHeader ref="searchCompany" :inputValue="companyName" :componentName="'contacts'" @clickItem="setCompanyValue"></searchGroupHeader>
                                    </div>
                                </div>
                            </div>
                            <div style="position:absolute;right:0;top:0">
                                <a-button style="float:right" type="primary" @click="getList()" enter-button>
                                    搜索
                                </a-button>
                            </div>
                        </section>
                        <a-row>
                            <a-col :span="24">
                                <div class="table-box">
                                    <a-table id="bills_tb_book" :columns="columns" :data-source="dataSource" :pagination="false" :expandedRowKeys="tableExplandKey" :size="small" :scroll="{x:600,y:550}" :loading="tableLoading" bordered>
                                        <template slot="balanceAmount" slot-scope="text,record">
                                            <div v-show="record.voucherCode || record.receiveDeliverType == 3" :class="text > 0 ? 'g':'r'">{{text | NumFormat}}</div>
                                        </template>
                                        <template slot="balanceBaseQuantity" slot-scope="text,record">
                                            <div v-show="record.voucherCode || record.receiveDeliverType == 3 " :class="text > 0 ? 'g':'r'">{{text | NumFormat}}</div>
                                        </template>
                                        <template slot="balancePrice" slot-scope="text,record">
                                            <div v-show="record.voucherCode || record.receiveDeliverType == 3">{{text | NumFormat}}</div>
                                        </template>
                                        <template slot="inBaseQuantity" slot-scope="text,record">
                                            <div v-show="record.receiveDeliverType != 3" :class="!record.voucherCode ?(text > 0 ? 'gb':'gr'):''">{{text | NumFormat}}</div>
                                        </template>
                                        <template slot="inAmount" slot-scope="text,record">
                                            <div v-show="record.receiveDeliverType != 3" :class="!record.voucherCode ?(text > 0 ? 'gb':'gr'):''">{{text | NumFormat}}</div>
                                        </template>
                                        <template slot="inPrice" slot-scope="text,record">
                                            <div v-show="record.voucherCode">{{text | NumFormat}}</div>
                                        </template>
                                        <template slot="outBaseQuantity" slot-scope="text,record">
                                            <div v-show="record.receiveDeliverType != 3" :class="!record.voucherCode ?(text > 0 ? 'gb':'gr'):''">{{text | NumFormat}}</div>
                                        </template>
                                        <template slot="outAmount" slot-scope="text,record">
                                            <div v-show="record.receiveDeliverType != 3" :class="!record.voucherCode ?(text > 0 ? 'gb':'gr'):''">{{text | NumFormat}}</div>
                                        </template>
                                        <template slot="outPrice" slot-scope="text,record">
                                            <div v-show="record.voucherCode">{{text | NumFormat}}</div>
                                        </template>
                                    </a-table>
                                </div>
                            </a-col>
                        </a-row>
                        <div class="edit-mask" v-show="editMask">
                            <!-- 遮罩（点击修改关闭遮罩） -->
                        </div>
                    </section>
                </div>
            </div>
        </div>

        <!--加载中-->
        <div class="loading-wrapper" v-show="loading">
            <a-spin class="loading-content" tip="加载中..." />
        </div>
        <!--用做横向打印-->
        <!-- <div v-html="stylePrint"></div> -->
        <print-modal ref="printDom" v-if="printVisible" :incomingPrintData="incomingPrintData" @cancelPrint="cancelPrint"></print-modal>
    </div>
</template>
<script>

import { searchWrapperNotPlan } from '@/components/SearchWrapper/';
import { exportPostAction, postAction } from "@/api/manage";
import moment from "moment";
import { list as ListPeriod } from "@/api/erp/period";//获取会计期间
import { Controlwidth } from "@/utils/antTableComponents";
import FormSearchGroup from '@/components/Form/FormSearchGroup';
import searchGroupHeader from "@/components/Finance/searchGroupHeader";

import searchArchives from '@/components/OrderDynamicForm/searchArchives'
import searchArchivesName from '@/components/OrderDynamicForm/searchArchivesName'
import searchArchivesType from '@/components/OrderDynamicForm/searchArchivesType'

export default {
    components: {
        searchGroupHeader,
        FormSearchGroup,        //搜索选择
        searchArchives,         //物料
        searchArchivesName,     //物料名称
        searchArchivesType,
        searchWrapperNotPlan,     //物料分类
    },
    data () {
        return {
            //----------↓样式----------
            btn_grid: {
                xs: 2,
                sm: 2,
                md: 2,
                lg: 2,
                xl: 2
            },
            //----------↑样式----------

            columns: [
                {

                    // title: '单据日期',
                    // key: 'voucherDate',
                    // dataIndex: 'voucherDate',
                    title: '出入库日期',
                    key: 'inDate',
                    dataIndex: 'inDate',
                    width: 100,
                    align: 'center',
                    customRender: (text, record, index) => {
                        let {receiveDeliverType} = record;
                        switch(receiveDeliverType){
                            case 3: return <span class='b r'>期初结存</span>;
                            case 5: return <span class='b'>本月合计</span>;
                            case 6: return <span class='b'>本年合计</span>;
                            default: return text;
                        }
                        
                    },
                },
                {
                    title: '单据类型',
                    dataIndex: 'dataSource',
                    width: 100,
                    customRender: (text, record, index) => {
                        let backText = '';
                        if (record.businessType == 5) {
                            backText = '材料退货';
                        } else if (record.businessType == 98) {
                            backText = '销售退货';
                        } else if (record.businessType == 99) {
                            backText = '采购退货';
                        } else if (record.businessType == 94) {
                            backText = '产品退库';
                        } else if (record.businessType == 95) {
                            backText = '委外产品退库';
                        } else {
                            let item = this.dataSourcesArray.filter(item => item.code == text);
                            backText = item[0] == null ? null : item[0].name;
                        }
                        return backText;
                    },
                },
                {
                    title: '单据编号',
                    dataIndex: 'voucherCode',
                    width: 150,
                    align: 'left',
                },
                // {
                //     title: '业务类型',
                //     dataIndex: 'businessType',
                //     width: 80,
                //     customRender: (val) => {
                //         let item = this.businessTypesArray.filter(item => item.code == val);
                //         return item[0] == null ? null : item[0].name;
                //     }
                // },
                {
                    title: '业务单位',
                    dataIndex: 'crmName',
                    align: 'left',
                    width: 150,
                    ellipsis: true,
                    customRender: (text,row,index) => {
                        return row.crmName || row.vendorName || row.officeName ||'';
                    }
                },
                //  {
                //     title: '供应商名称',
                //     dataIndex: 'vendorName',
                //     align: 'left',
                //     width: 80,
                //     ellipsis: true,
                // }, 
                {
                    title: '项目编码',
                    dataIndex: 'projectCode',
                    align: 'left',
                    width: 80,
                    ellipsis: true,
                }, {
                    title: '项目名称',
                    dataIndex: 'projectName',
                    align: 'left',
                    width: 80,
                    ellipsis: true,
                },
                {
                    title: '收入',
                    width: 300,
                    children: [
                        {
                            title: '数量',
                            dataIndex: 'inBaseQuantity',
                            align: 'right',
                            width: 100,
                            ellipsis: true,
                            scopedSlots: {
                                customRender: 'inBaseQuantity'
                            }
                        },
                        {
                            title: '单价',
                            dataIndex: 'inPrice',
                            align: 'right',
                            width: 100,
                            ellipsis: true,
                            scopedSlots: {
                                customRender: 'inPrice'
                            }
                        }, {
                            title: '金额',
                            dataIndex: 'inAmount',
                            align: 'right',
                            width: 100,
                            ellipsis: true,
                            scopedSlots: {
                                customRender: 'inAmount'
                            }
                        }]
                }, {
                    title: '发出',
                    width: 300,
                    children: [
                        {
                            title: '数量',
                            dataIndex: 'outBaseQuantity',
                            align: 'right',
                            width: 100,
                            ellipsis: true,
                            scopedSlots: {
                                customRender: 'outBaseQuantity'
                            }
                        }, {
                            title: '单价',
                            dataIndex: 'outPrice',
                            align: 'right',
                            width: 100,
                            ellipsis: true,
                            scopedSlots: {
                                customRender: 'outPrice'
                            }
                        }, {
                            title: '金额',
                            dataIndex: 'outAmount',
                            align: 'right',
                            width: 100,
                            ellipsis: true,
                            scopedSlots: {
                                customRender: 'outAmount'
                            }
                        }]

                },
                {
                    title: '结存数量',
                    dataIndex: 'balanceBaseQuantity',
                    align: 'right',
                    width: 80,
                    ellipsis: true,
                    scopedSlots: {
                        customRender: 'balanceBaseQuantity'
                    }
                }, {
                    title: '结存单价',
                    dataIndex: 'balancePrice',
                    align: 'right',
                    width: 80,
                    ellipsis: true,
                    scopedSlots: {
                        customRender: 'balancePrice'
                    }
                }, {
                    title: '结存金额',
                    dataIndex: 'balanceAmount',
                    align: 'right',
                    width: 80,
                    ellipsis: true,
                    scopedSlots: {
                        customRender: 'balanceAmount'
                    }
                },
                {
                    title: '备注',
                    dataIndex: 'remarks',
                    align: 'left',
                    width: 200,
                    ellipsis: true,
                },],
            dataSources: [], // 单据类型
            dataSourcesArray: [
                { name: '库存期初', code: 'PeriodStartOfStock' },
                { name: '采购入库', code: 'PurchaseReceiveVoucher' },
                { name: '产成品入库', code: 'ProductReceiveVoucher' },
                { name: '委外入库', code: 'DelegateReceiveVoucher' },
                { name: '其他入库', code: 'OtherReceiveVoucher' },
                { name: '销售出库', code: 'SaleDispatchVoucher' },
                { name: '材料出库', code: 'MaterialDispatchVoucher' },
                { name: '委外出库', code: 'DelegateDispatchVoucher' },
                { name: '其他出库', code: 'OtherDispatchVoucher' },
            ],
            businessTypes: [], // 业务类型                                
            businessTypesArray: [
                { name: '普通采购', code: 1 },
                { name: '固定资产', code: 2 },
                { name: '普通销售', code: 3 },
                { name: '领料', code: 4 },
                { name: '退料', code: 5 },
                { name: '补料', code: 6 },
                { name: '生成完工', code: 9 },
                { name: '产品退库', code: 94 },
                { name: '委外产品退库', code: 95 },
                { name: '销售退货', code: 98 },
                { name: '采购退货', code: 99 },
                { name: '库存期初', code: 100 },
                { name: '其他入库', code: 109 },
            ],
            pagination: {
                size: "small",
                defaultPageSize: 200,
                current: 1,
                pageSize: 200,
                total: 0,
                showTotal: total => {
                    return (
                        <div>
                            共 {total-1} 条数据，每页
                            <a-input style="height:22px !important;width:3.2rem;"
                                value={this.pagination.pageSize}
                                min={1}
                                max={200}
                                size="small"
                                step={1}
                                onPressEnter={e => this.changePageSize(e)}
                            />
                            条
                        </div>
                    );
                },
                onChange: (page, pageSize) => {
                    this.pagination.current = page;
                    this.pagination.pageSize = pageSize;
                    console.log(page,pageSize,this.pagination   );
                    this.getList();
                },
            },
            dataSource: [],
            setTime: null,  //延迟请求
            tableExplandKey: [],//默认展开的行

            //物料
            warehouseName: null,//仓库
            warehouseId: null,
            companyName: null,//往来单位
            companyId: null,
            maskArchives: false,
            maskArchivesName: false,
            maskArchivesType: false,
            zIndex: 5,
            zIndexType: 5,
            inputType: null,
            inventoryCode: null,
            inventoryName: null,
            inventoryId: null,
            inventoryType: null,
            inventoryTypeNameArray: [],
            inventoryTypeIdArray: [],
            periodDate: null,//期间
            startPeriod: null,//期间开始
            endPeriod: null,//期间结束
            voucherDate: null,//单据日期
            voucherDateStart: null,//单据开始日期
            voucherDateEnd: null,//单据结束日期
            unitName: null,//计量单位
            inventorySpecification: null,//规格型号
            inventoryClassName: null,//物料分类
            safeStorage: null,//安全库存
            maxStorage: null,//最高库存
            minStorage: null,//最低库存
            postData: {},
            currentPeriodStart: 0,
            currentPeriodEnd: 0,
            tableLoading: false,
            NumberStyle:{
                color: 'green',
            },
        };
    },
    updated () {
        Controlwidth("bills_tb_book", 50);
    },
    created () {
        this.getPeriod();
    },
    methods: {
        moment,
        //导出
        exportOrder () {
            if (!this.warehouseId) {
                this.$message.warning('仓库必须选择');
                this.tableLoading = false;
                return;
            }

            if (!this.inventoryId) {
                this.$message.warning('物料名称必须选择');
                this.tableLoading = false;
                return;
            }

            exportPostAction('/inOut/recordMain/inventoryStandingBookExportData', this.postData).then(response => {
                let url = window.URL.createObjectURL(
                    new Blob([response], { type: "application/vnd.ms-excel" })
                );
                let link = document.createElement("a");
                link.style.display = "none";
                link.href = url;
                link.setAttribute("download", "库存台账.xls");
                document.body.appendChild(link);
                link.click();
            }).catch(error => { });
        },
        printOrder () {
            //打印
            this.$print(this.$refs.print);
        },
        //动态查询搜索条件
        searchDynamic () {
            this.$refs.searchWrapperRef.showModel();
        },
        searchGroup (t) {
            if (t == 1) {
                this.$refs.credentialsSearch.showModal();
            } else {
                //延迟请求
                if (this.setTime) {
                    clearTimeout(this.setTime)
                }
                this.setTime = setTimeout(() => {
                    this.$refs.credentialsSearch.inputSearch();
                }, 500)
            }
        },
        searchCompany (t) {
            if (t == 1) {
                this.$refs.searchCompany.showModal();
            } else {
                //延迟请求
                if (this.setTime) {
                    clearTimeout(this.setTime)
                }
                this.setTime = setTimeout(() => {
                    this.$refs.searchCompany.inputSearch();
                }, 500)
            }
        },
        handleChangeBusiness (e, v) {
            console.log(e, v)
            this.businessTypes = e;
        },
        onPeriodDate (dates, dateStrings) {
            //期间
            console.log('From: ', dates[0], ', to: ', dates[1]);
            console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
            console.log(dateStrings);
            this.periodDate = dateStrings;
            this.startPeriod = dateStrings[0].slice(0, 7);
            this.endPeriod = dateStrings[1].slice(0, 7);
        },
        onChangeDate (dates, dateStrings) {
            //单据日期
            console.log('From: ', dates[0], ', to: ', dates[1]);
            console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
            console.log(dateStrings);
            this.voucherDate = dateStrings;
            this.voucherDateStart = dateStrings[0];
            this.voucherDateEnd = dateStrings[1];
        },
        //获取列表
        getList () {
            this.tableLoading = true;
            if (!this.warehouseId) {
                this.$message.warning('仓库必须选择');
                this.tableLoading = false;
                return;
            }

            if (!this.inventoryId) {
                this.$message.warning('物料名称必须选择');
                this.tableLoading = false;
                return;
            }

            //期间
            if (this.currentPeriodStart > this.currentPeriodEnd) {
                this.$message.warning('开始期间必须小于结束期间');
                return;
            }

            this.postData = {
                // page: {
                //     current: this.pagination.current,
                //     size: this.pagination.pageSize,
                // },
                page:{
                    size:-1
                },
                inventoryId: this.inventoryId,
                warehouseId: this.warehouseId,
                companyId: this.companyId,
                // voucherDateStart: this.voucherDateStart,
                // voucherDateEnd: this.voucherDateEnd,
                inOutDateStart: this.voucherDateStart,  //出入库日期开始
                inOutDateEnd: this.voucherDateEnd,      //出入库日期结束
                startPeriod: this.startPeriod,
                endPeriod: this.endPeriod,
            }
            postAction('/inOut/recordMain/statisticInventoryStandingBookVo', this.postData).then(response => {
                if (response.code === 200) {
                    this.tableLoading = false;
                    let total = response.data.total;
                    if(total > 0){
                        total++;
                    }
                    // this.pagination.total = total;
                    this.dataSource = response.data.records;

                    console.log(this.dataSource);
                }
            }).catch(error => { });
        },
        //改变分页大小
        changePageSize (e) {
            const value = e.target.value;
            let size = Number.parseInt(value);
            if (!size) {
                size = 20;
            }
            if (size > 500) {
                size = 500;
            }
            Object.assign(this.pagination, {
                current: 1,
                pageSize: size,
            });

            this.getList();
        },
        handleSearch (n) {
            console.log(n);
            this.$refs[`${n}`].showModal();
        },
        setValue (data) {
            console.log("选择仓库：",data);
            //仓库
            this.warehouseName = data.whName;
            this.warehouseId = data.id;
        },
        setCompanyValue(data){
            console.log("选择往来单位：",data)
            this.companyId = data.id,
            this.companyName = data.crmName
        },
        handlInputArchives (type, ref) {

            // document.getElementsByClassName('ant-modal-content')[0].style.transform = 'none';

            this.inputType = type;
            if (type == 1 || type == 2) {
                this.maskArchives = true;
                this.zIndex = 1;
                this.zIndexType = 1;
            } else if (type == 3) {
                this.zIndex = 5;
                this.zIndexType = 1;
                this.maskArchivesName = true;
            } else if (type == 4) {
                this.zIndexType = 6;
                this.zIndex = 1;
                this.maskArchivesType = true;
            }
            //获取位置
            // this.$nextTick(()=>{

            //     console.log(this.$refs[`${ref}`]);
            //     let loc = this.$refs[`${ref}`].getBoundingClientRect();
            //     this.inventoryDomTop = Math.abs(loc.top);
            // })
        },
        handleArchiveChange () {
            //物料编码搜索
            this.$refs.searchArchivesRef.inputVal = this.inventoryName;
            this.$refs.searchArchivesRef.getData(1);
        },
        handleEnter (t) {
            if (t == 1) {
                this.$refs.searchArchivesRef.handleEnter();
            } else {
                this.$refs.searchArchivesRefName.handleEnter();
            }
        },
        closeArchives () {
            this.maskArchives = false;
            this.maskArchivesName = false;
            this.maskArchivesType = false;
        },
        //关闭物料档案弹窗
        handlCloseArchives () {
            document.getElementsByClassName('ant-modal-content')[0].style.transform = 'translate(0px, 0px)';

            if (this.inputType == 1 || this.inputType == 2) {
                this.maskArchives = false;
                this.$refs.searchArchivesRef.closeModel();
            } else if (this.inputType == 3) {
                this.maskArchivesName = false;
                this.$refs.searchArchivesRefName.closeModel();
            } else if (this.inputType == 4) {
                this.maskArchivesType = false;
                this.$refs.searchArchivesRefType.closeModel();
            }
        },
        //物料选择范围-----------------------------------
        checkArchives (data) {
            this.maskArchives = false;
            this.maskArchivesName = false;

            console.log('选择物料返回的数据:', data)
            //返回值处理
            if (data[1] == 1) {
                //起始值
                this.inventoryCode = data[0][0].inventoryCode;
                this.inventoryName = data[0][0].inventoryName;
                this.inventoryId = data[0][0].id;
                this.unitName = data[0][0].unitName ? data[0][0].unitName : data[0][0].unitGroupName;
                this.inventorySpecification = data[0][0].inventorySpecification;
                this.inventoryClassName = data[0][0].inventoryClassName;
                this.safeStorage = data[0][0].safeStorage;//安全库存
                this.maxStorage = data[0][0].maxStorage;//最高库存
                this.minStorage = data[0][0].minStorage;//最低库存
            }
            if (data[1] == 2) {
                //起始值
                this.endCode = data[0][0].inventoryCode;
            }
            if (data[1] == 3) {
                //物料编码名称
                this.inventoryName = data[0][0].inventoryName;
            }
            if (data[1] == 4) {
                //物料分类
                console.log(data[0]);
                let tData = data[0].checkedNodes;
                let typeNameArray = [];
                let typeIdArray = [];
                tData.forEach(item => {
                    typeNameArray.push(item.data.class);
                    typeIdArray.push(item.data.props.id);
                });

                this.inventoryTypeNameArray = typeNameArray.join(';')
                this.inventoryTypeIdArray = typeIdArray;
            }

            this.closeArchives();
        },
        rowClassName (record, index) {
            return !record.inventoryName ? 'changeColorClass' : '';
        },
        syncFun () {
            //刷新
            this.getList();
        },
        getPeriod () {
            //获取会计期间
            ListPeriod().then(response => {
                if (response.code === 200) {
                    console.log(response.data);
                    this.periodData = response.data[0].erpPeriodList;
                }
            }).catch(error => {
                this.$message.error(error.message);
            });
        },
        startPeriodChange (val, select) {
            this.startPeriod = select.key.id;
            this.currentPeriodStart = select.data.key.currentPeriod;
        },
        endPeriodChange (val, select) {
            this.endPeriod = select.key.id;
            this.currentPeriodEnd = select.data.key.currentPeriod;
        },
    }
};
</script>
<style lang="less">
    @import '~@/style/purchase/voucher.less';
    .changeColorClass {
        font-weight: bold;
        background-color: #fffceb;
    }
    .credentials-wrapper {
        padding: 10px;
        height: auto;
        overflow-y: auto;
        font-size: 14px;
        .date-tp {
            margin-bottom: 10px;
            .header-tp {
                text-align: left;
            }
        }
        .footer-tp {
            text-align: center;
            margin-top: 10px;
        }

        .text-name {
            // border-bottom: 2px solid rgba(0, 0, 0, 0.8);
            padding-bottom: 5px;
        }

        .mask-archives {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            // background: rgba(220, 53, 69, 0.5);
            background: rgba(0, 0, 0, 0);
            z-index: 2;
        }

        .credentials-search-warpper {
            position: relative;
            .search-box {
                display: flex;
                width: calc(100% - 60px);
                flex-wrap: wrap;
                .ant-select-selection__rendered {
                    line-height: 32px !important;
                }
                .ant-select {
                    width: 100%;
                }
                .filter {
                    display: table;
                    width: 246px;
                    margin-bottom: 5px;
                    .filter-label {
                        display: table-cell;
                        font-weight: normal;
                        max-width: 160px;
                        line-height: 32px;
                        white-space: nowrap;
                        vertical-align: bottom;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                    .filter-control {
                        display: table-cell;
                        width: 100%;
                    }
                }
            }
        }

        .bills-box-header {
            display: flex;
            justify-content: space-around;
            .filter {
                display: table;
                width: 280px;
                margin-bottom: 5px;
                .filter-label {
                    display: table-cell;
                    font-weight: normal;
                    max-width: 160px;
                    line-height: 32px;
                    white-space: nowrap;
                    vertical-align: bottom;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
                .filter-control {
                    display: table-cell;
                    width: 100%;
                }
            }
        }
    }

    #bills_tb_book {
        .ant-table-placeholder {
            top: 65px;
        }
    }
  
</style>
<style lang="less" scoped>
    .b{
        font-weight: 700;  
    }
    // .g{
    //     color: green;
    // }
    // .r{
    //     color: red;
    // }
    .gb{
        // color: green;
        font-weight: 700;
    }
    .rb{
        // color: red;
        font-weight: 700;
    }
</style>